<!--
 * @Author: jswang
 * @Date: 2021-07-30 10:57:50
 * @LastEditTime: 2021-08-16 14:40:00
-->
<template>
  <!-- 放置结构内容 -->
          <!-- {data}  是解构出来的,  slot-scope= "obj" 是一个对象   里面有两个属性 node  data -->
        <el-row type="flex" justify="space-between" align="middle" style="height:40px; width:100%">
          <!-- 左侧内容 -->
          <el-col>
            <span>{{treeNode.name}}</span>
          </el-col>
          <!-- 右侧内容 -->
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-col>{{treeNode.manager}}</el-col>
              <el-col>
                <!-- 放置下拉菜单 -->
                <el-dropdown @command="operateDepts">
                  <!-- 内容 -->
                  <span>操作 <i class="el-icon-arrow-down"></i></span>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item command="add" :disabled="!checkPermission('add-dept')">添加子部门</el-dropdown-item>
                     <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
                     <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
</template>
<script>
import {delDepartments} from '@/api/departments'
export default {
  props:{
    //定义传入的属性
    treeNode:{
      //要求使用组件的时候必须传递 treeNode
      require:true,
      type:Object
    },
    isRoot:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    //点击 编辑  删除  新增 时触发
    operateDepts(type){
      //添加子部门
      if(type === 'add'){
        this.$emit('addDepts', this.treeNode) // 为何传出treeNode 因为是添加子部门 需要当前部门的数据
      }else if(type === 'edit'){
        this.$emit('editDepts',this.treeNode)
      }else{
        //删除子部门
        this.$confirm('您确定要删除该组织部门吗?').then(()=>{
          return delDepartments(this.treeNode.id).then()
        }).then(()=>{
          this.$emit('delDepts') // 触发自定义事件
          this.$message.success("删除成功!")
        })
      }
    }
  }
}
</script>